<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账号管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{../../css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{../../js/jquery-3.4.1.js}"></script>
</head>
<body>
<!--流式布局-->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- head: 数据表格搜索 -->
        <div class="layui-header">
            <div class="layui-form layui-form-pane">
                <!-- 搜索条件input -->
                <!-- 搜索按钮，已经使用表格的toolbar -->
            </div>
        </div>
        <!-- body: 数据表格（工具条、表格内容） -->
        <!-- 表格头工具按钮组-->
        <div id="LAY-table-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-event="add">
                <i class="layui-icon">&#xe642;添加</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-event="search">
                <i class="layui-icon">&#xe615;查询</i>
            </button>
            <button type="button" class="layui-btn layui-btn-radius layui-btn-danger" lay-event="batch_del">
                <i class="layui-icon">&#xe640;批量</i>
            </button>
        </div>

        <div class="layui-card-body">
            <table id="LAY-table" class="layui-table layui-inline" lay-filter="LAY-table"></table>
        </div>
        <!-- other: 表格行数据按钮组-->
        <div id="LAY-table-row-bar" class="layui-btn-group layui-hide">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal" lay-event="edit">
                <i class="layui-icon">&#xe642;编辑</i>
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" lay-event="del">
                <i class="layui-icon">&#xe640;删除</i>
            </button>
        </div>
    </div>
</div>
<!--用于包装引入外部html的div-->
<div id="LAY-form-display" class="layui-hide" lay-filter="LAY-form-display"></div>

<script type="text/javascript" th:src="@{../../layui.all.js}"></script>
<script type="text/javascript" th:src="@{../../js/layinit.js}"></script>
<script>

    layer.ready(function () {
        // 加载外部html
        $('#LAY-form-display').load('./account-div.html');
    });


    // layui
    layui.config({
        base: '../../js/ext/' // 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
    }).use(['form', 'laydate', 'table', 'util', 'serverurl'], function () {
        // do something ...
        let form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            util = layui.util,
            auth = layui.auth;

        /*静态变量*/
        const method = 'POST', contentType = 'application/json';

        /**
         * tableIns: 表格返回值
         * winIndex: 弹出层索引
         */
        let tableIns, winIndex;

        /*-----------[table]-----------*/
        tableIns = table.render({
            elem: '#LAY-table',
            url: auth.account.list,
            cols:[      [
                {field: 'id', title: 'ID', hide: true},
                {field: 'accountName', title: '账号'},
                {field: 'password', title: '密码', hide: true},
                {field: 'name', title: '姓名'},
                {field: 'phone', title: '手机号'},
                {field: 'userCount', title: '关联用户数'},
                {
                    field: 'createTime', title: '创建时间', sort: true, templet: function (d) {
                        return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")
                    }
                },
                {width: 200, align: 'center', title: '操作', toolbar: '#LAY-table-row-bar'}
            ]],
        });

        // 表格头工具栏监听
        table.on('toolbar(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'add':
                    win.open('新增');
                    break;
                case 'search':
                    break;
                case 'batch_del':
                    break;
                default:
                    break;
            }
        });

        //  行工具监听
        table.on('tool(LAY-table)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    $.get(auth.account.get + '/' + obj.data.id, function (res) {
                        let data = res.data;
                        form.val('LAY-form', {
                            id: data.id,
                            accountName: data.accountName,
                            name: data.name,
                            phone: data.phone
                        });
                    });
                    win.open('编辑');
                    break;
                case 'del':
                    layer.confirm('删除账号其关联用户也将删除，确认删除吗?', {icon: 2, title: '删除'}, function (index) {
                        $.get(auth.account.del + '/' + obj.data.id, function (res) {
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + data.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                tableIns.reload();
                                layer.close(index);
                            }
                        });
                    });
                    break;
                default:
                    break;
            }
        })


        /*-----------[form]-----------*/
        // 表单验证
        form.verify({
            confirmPwd: function (value, item) {
                let password = $('[name="password"]').val();
                if (password !== value) {
                    return '两次输入的密码不一致';
                }
            }
        });

        /*-----------[弹出层]-----------*/
        const win = {
            open: function (title) {
                return layer.open({
                    type: 1,
                    title: title,
                    content: $('#LAY-form-display'),
                    btn: ['提交', '重置', '关闭'],
                    yes: function (index, layero) {
                        let data = {};
                        // 取form表单数据 方法1
                        let formval = form.val('LAY-form');
                        // 取form表单数据 方法2
                        /*layui.each(layero.find('#LAY-FORM').serializeArray(), function (index, item) {
                            data[item.name] = item.value;
                        });*/
                        $.post(auth.account.add, JSON.stringify(formval), function (res) {
                            if (res.code !== 0) {
                                layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                            } else {
                                layer.msg('操作成功', {icon: 6});
                                layer.close(index);
                                tableIns.reload();
                            }
                        }, 'JSON');

                        return false; //禁止点击该按钮关闭
                    },
                    btn2: function (index, layero) {
                        //todo 初始化表单
                        return false;
                    },
                    btn3: function (index, layero) {
                        //todo 初始化表单
                    },
                    success: function () {

                        $('#LAY-form')[0].reset();
                        $('#LAY-form-display').removeClass('layui-hide');
                        form.render();
                    }
                });
            },
            close: function (index) {
                layer.close(index);
            }
        };
    });
</script>

</body>
</html>